<template>
  <div id="app">
    <div class="bkground">
      <div class="con">
        <div class="code-wrap" v-if="flag">
          <img :src="qrcode" alt class="code">
        </div>
        <div class="shili" v-if="!flag">恭喜 {{winPerson}} 赢得本次冠军</div>
        <div class="input-wrap" :style="{width:shiliWidth}">
          <input type="button" value="重置游戏" @click="reset">
          <input type="button" value="实力选手" @click="shili">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "index",
  data() {
    return {
      API: "http://dev.zhongxiangtianxia.cn",
      CAR: "https://car.zhongxiangtianxia.cn",
      qrcode: "../../static/bg.jpg", //二维码
      flag: false,
      shiliWidth: "420px",
      winPerson: "",
      scene: ""
    };
  },
  methods: {
    //重置二维码
    reset() {
      axios
        .post("api/meetingluckdraw/makeQRcode", {})
        .then(res => {
          if (res.status === 200) {
            this.flag = true;
            this.shiliWidth = "420px";
            this.qrcode = this.CAR + res.data.data.code;
            this.scene = res.data.data.scene;
          } else {
            alert("获取失败");
            return false;
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    shili() {
      this.flag = false;
      this.shiliWidth = "530px";
      axios
        .post("api/Meetingluckdraw/getUserMeetingData", { scene: this.scene })
        .then(res => {
          if (res.code === 200) {
            this.winPerson = res.data.data;
          } else {
            alert("获取失败");
            return false;
          }
        });
    }
  },
  created() {
    this.$nextTick(() => {
      this.reset();
    });
  }
};
</script>

<style scoped>
html,
body,
#app {
  width: 100%;
  height: 100%;
}

* {
  margin: 0;
  padding: 0;
}

.bkground {
  width: 100%;
  height: 100%;
  background: url("../../static/bg.png") no-repeat;
  background-size: 100% 100%;
  background-position: center;
  display: flex;
}

.con {
  margin: auto;
  margin-bottom: 220px;
}

.code-wrap {
  width: 220px;
  height: 220px;
  margin: auto;
}

.code {
  width: 100%;
  height: 100%;
}

.input-wrap {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 20px;
  width: 420px;
}

input[type="button"] {
  border: 0;
  outline: none;
  width: 170px;
  height: 40px;
  line-height: 40px;
  background-image: linear-gradient(0deg, #ffce0c 0%, #ffe600 53%, #ffd143 100%),
    linear-gradient(#ff9e3a, #ff9e3a);
  background-blend-mode: normal, normal;
  box-shadow: 0px 4px 20px 0px rgba(120, 3, 17, 0.75);
  border-radius: 15px;
  color: #ff5f4a;
  font-size: 22px;
}

.shili {
  width: 530px;
  height: 230px;
  line-height: 230px;
  background: url("../../static/shili.png") no-repeat;
  background-size: 100% 100%;
  background-position: center;
  margin: auto;
  text-align: center;
  font-size: 30px;
  color: #ff5f4a;
}
</style>
